<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Tabs Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .tab-container {
            display: flex;
            border-bottom: 2px solid #007bff;
        }
        .tab {
            flex: 1;
            padding: 10px;
            margin-right: 1px;
            border: 1px solid #ddd;
            border-bottom: none;
            background-color: #f8f9fa;
            text-align: center;
            font-weight: bold;
            color: #007bff;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .tab:hover {
            background-color: #e9ecef;
        }
        .tab-content {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            padding: 20px;
            display: none;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }
        .tab-content.active {
            display: block;
            opacity: 1;
        }
        .tab-content h2 {
            margin-top: 0;
            color: #007bff;
        }
        .tab-content p {
            line-height: 1.6;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="tab-container">
            <div class="tab" onclick="showTab('tab1')">Company Overview</div>
            <div class="tab" onclick="showTab('tab2')">Contact Us</div>
        </div>

        <div id="tab1" class="tab-content">
            <h2>Company Overview</h2>
            <p>Welcome to [Company Name]. We are a leading firm specializing in [industry]. Our commitment to excellence and innovation drives us to deliver outstanding results for our clients. Learn more about our services and how we can assist you in achieving your business goals.</p>
        </div>

        <div id="tab2" class="tab-content">
            <h2>Contact Us</h2>
            <p>If you have any questions or need further information, please reach out to us:</p>
            <p>Email: info@[companydomain].com<br>
               Phone: +1 (123) 456-7890<br>
               Address: 123 Business St, Suite 100, City, State, ZIP</p>
        </div>
    </div>

    <script>
        function showTab(tabId) {
            // Hide all tab content with fade out effect
            var contents = document.querySelectorAll('.tab-content');
            contents.forEach(function(content) {
                content.classList.remove('active');
            });

            // Show the selected tab content with fade in effect
            var activeTab = document.getElementById(tabId);
            if (activeTab) {
                activeTab.classList.add('active');
            }
        }

        // Show the first tab by default
        showTab('tab1');
    </script>

</body>
</html>
